<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top">
      <van-icon name="arrow-left" @click="returnTap" />
      <span>通话详情</span>
      <span style="color: #06c25f" @click="editTap">编辑</span>
    </div>
    <div class="message">
      <img
        @click="show = true"
        class="return_icon"
        src="../../../../static/images/me/headimg.png"
        alt=""
      />
      <span>客户</span>
    </div>
    <div class="list">
      <div class="list1">
        <van-icon class="listIcon" name="chat-o" />
        <span>信息</span>
      </div>
      <div class="list2">
        <span class="listText1">崔总</span>
        <span class="listText2">12334567891011</span>
      </div>
      <div class="list1">
        <van-icon class="listIcon" name="phone-o" />
        <span>信息</span>
      </div>
    </div>
    <div class="msg">
      <span class="msg1">2020年8月16日</span>
      <span class="msg2">下午 7:20 未接来电</span>
    </div>
    <div class="title">详细备注</div>
    <!-- <div class="mell">创建时间： 2020年8月20日</div> -->
    <div class="mell1" @click="editTap">新建联系人</div>
    <div class="title" style="margin-top: 60px; color: red" @click="deleteTap">
      删除
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    editTap() {
      this.$router.push("/tonghuaedit");
    },
    deleteTap() {
      Dialog.confirm({
        title: " ",
        message: "是否删除",
        confirmButtonText:"删除",
        confirmButtonColor:"red"
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style scoped>
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eee;
}
.all {
  background: #4AC7D7;
}
.message {
  height: 180px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
}
.message img {
  width: 100px;
  height: 100px;
}
.message span {
  font-size: 18px;
  margin-top: 10px;
}
.list {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.list1,
.list2 {
  width: 30%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.list1 {
  color: #1179ff;
}
.listIcon {
  font-size: 50px;
  color: #1179ff;
}
.listText1 {
  margin-bottom: 10px;
  font-size: 22px;
}
.listText2 {
  margin-top: 5px;
  font-size: 16px;
  color: #e62524;
}
.msg {
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  border-bottom: 10px solid #eee;
}
.msg1 {
  font-size: 20px;
  margin: 20px 0 0 20px;
}
.msg2 {
  font-size: 15px;
  margin: 20px 0 0 20px;
  font-weight: bold;
}
.title {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.mell {
  width: 90%;
  height: 60px;
  padding-left: 10%;
  background: #fff;
  color: #b8b8b8;
  line-height: 60px;
}
.mell1 {
  width: 90%;
  height: 60px;
  padding-left: 10%;
  background: #fff;
  color: #06c25f;
  line-height: 60px;
}
</style>